import React, { useState } from 'react';
import { Icon } from 'antd';
import cn from 'classnames';
import { changeNumToCharacter } from '../../utils';
import styles from './index.less';

let bgKey = 0;

const ExpandUnit = ({
    dataKey: key,
    Component,
    dataItemKeys,
    keyIndex,
    setDataItemKeys,
    recordListLength,
    ...props
}) => {
    const [isExpanded, setIsExpanded] = React.useState(true);
    const deleteGroup = targetKey => {
        let newKeys = [];
        newKeys = dataItemKeys.filter(dKey => dKey !== targetKey);
        setDataItemKeys([...newKeys]);
    };
    const showClose = renderKey => {
        if (recordListLength > 0) {
            return true;
        }
        return renderKey !== 0;
    };

    const getTitle = () => {
        if (recordListLength === 0) {
            return `背调${changeNumToCharacter(recordListLength + key + 1)}`;
        }
        return `背调${changeNumToCharacter(recordListLength + key)}`;
    };

    return (
        <div className={styles.block} key={`${key}`}>
            <div className={styles.bgTitleWrap}>
                <span className={styles.title}>{getTitle()}</span>
                <span
                    className={styles.expand}
                    style={{ paddingRight: '24px' }}
                    onClick={() => {
                        setIsExpanded(!isExpanded);
                    }}
                >
                    {isExpanded ? (
                        <a>
                            收起 <Icon type="caret-down"></Icon>
                        </a>
                    ) : (
                        <a>
                            展开 <Icon type="caret-up"></Icon>
                        </a>
                    )}
                </span>
            </div>
            {isExpanded && (
                <div className={styles.formWrap}>
                    {showClose(key) ? (
                        <Icon
                            type="close"
                            className={cn(styles.delete)}
                            onClick={() => {
                                deleteGroup(key);
                            }}
                        />
                    ) : (
                        ''
                    )}
                    <Component dynamicKey={key} {...props} />
                </div>
            )}
        </div>
    );
};

const WithDynamicKey = props => {
    const { recordListLength, setShowButton } = props;
    const [dataItemKeys, setDataItemKeys] = useState([bgKey]);
    const addFormList = () => {
        bgKey += 1;
        const newWorkKeys = [...dataItemKeys, bgKey];
        setDataItemKeys(newWorkKeys);
    };

    const isFirstRun = React.useRef(true);

    const moreProps = {
        ...props,
        dataItemKeys,
        setDataItemKeys
    };

    React.useEffect(() => {
        if (recordListLength > 0) {
            setDataItemKeys([]);
        } else {
            setShowButton(true);
        }
    }, [recordListLength]);

    React.useEffect(() => {
        if (isFirstRun.current) {
            isFirstRun.current = false;
            return;
        }
        if (dataItemKeys.length > 0) {
            setShowButton(true);
        } else {
            setShowButton(false);
        }
    }, [dataItemKeys]);

    return Component => (
        <>
            {dataItemKeys.map((dataKey, keyIndex) => (
                <ExpandUnit Component={Component} {...moreProps} dataKey={dataKey} keyIndex={keyIndex} />
            ))}
            <div
                className={styles.add}
                onClick={() => {
                    addFormList();
                }}
            >
                + 添加背调记录
            </div>
        </>
    );
};

export default WithDynamicKey;
